<template>
	<div class="container goods">
		<div class="menu-wrapper" ref="menu">
			<ul class="menu-main">
				<li v-for="(item, index) in goods" class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index,$event)">
					<span class="text"><i v-if="item.type > 0" class="icon" :class="classMap[item.type]"></i>{{item.name}}</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foods">
			<ul>
				<li v-for="item in goods" class="food-list J-food-list">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods" class="food-item">
							<div class="icon" @click="selectFood(food, $event)">
								<img :src="food.icon" width="57">
							</div>
							<div class="content">
								<h2 class="name" @click="selectFood(food, $event)">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥<em class="num">{{food.price}}</em></span>
									<span v-if="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<cartcontrol @addCart="cartadd" :food="food"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
		<food :food="selectedFood" @addCart="cartadd" ref="food"></food>
	</div>
</template>

<script type="text/ecmascript-6">
	import BScroll from 'better-scroll';
	import shopcart from 'components/shopcart/shopcart.vue';
	import cartcontrol from 'components/cartcontrol/cartcontrol.vue';
	import food from 'components/food/food.vue';

	const ERR_OK = 0;

	export default {
		props: {
			seller: {
				type: Object
			}
		},
		data() {
			return {
				goods: [],
				listHeight: [],
				scrollY: 0,
				selectedFood: {}
			};
		},
		created() {
			this.$http.get('/api/goods').then((response) => {
				response = response.body;
				if (response.errno === ERR_OK) {
					this.goods = response.data;
					this.$nextTick(() => {
						this._initScroll();
						this._calculateHeight();
					});
				}
			});
			this.classMap = ['decrease', 'discount', 'guarantee', 'special', 'invoice'];
		},
		computed: {
			currentIndex() {
				for (let i = 0; i < this.listHeight.length; i++) {
					let heigth1 = this.listHeight[i];
					let height2 = this.listHeight[i + 1];
					if (!height2 || this.scrollY >= heigth1 && this.scrollY < height2) {
						return i;
					}
				}
				return 0;
			},
			selectFoods() {
				let foods = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							foods.push(food);
						}
					});
				});
				return foods;
			}
		},
		methods: {
			selectMenu(index, event) {
					if (!event._constructed) {
						return;
					}
				let foodList = this.$refs.foods.getElementsByClassName('J-food-list');
				let el = foodList[index];
				this.foodsScroll.scrollToElement(el, 300);
			},
			_initScroll() {
				this.menuScroll = new BScroll(this.$refs.menu, {
					click: true
				});
				this.foodsScroll = new BScroll(this.$refs.foods, {
					click: true,
					probeType: 3
				});
				this.foodsScroll.on('scroll', (pos) => {
					this.scrollY = Math.abs(Math.round(pos.y));
				});
				// console.log(this.scrollY);
			},
			_calculateHeight() {
				let foodList = this.$refs.foods.getElementsByClassName('J-food-list');
				// console.log(foodList);
				let heigth = 0;
				this.listHeight.push(heigth);
				for (let i = 0; i < foodList.length; i++) {
					let item = foodList[i];
					heigth += item.clientHeight;
					this.listHeight.push(heigth);
				}
				// console.log(this.listHeight);
			},
			cartadd(target) {
				this.$refs.shopcart.drop(target);
			},
			selectFood(food, event) {
				if (!event._constructed) {
					return;
				}
				this.selectedFood = food;
				this.$refs.food.show();
			}
		},
		components: {
			shopcart,
			cartcontrol,
			food
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import '../../common/stylus/mixin.styl'
	.goods
		display flex
		position absolute
		left 0
		top 174px
		bottom 46px
		width 100%
		overflow hidden
		.menu-wrapper
			flex 0 0 80px
			width 80px
			background-color #F3F5F7
			.menu-item
				display table
				height 54px
				width 56px
				line-height 14px
				padding 0 12px
				.text
					display table-cell
					width 56px
					vertical-align middle
					font-size 12px
					line-height 14px
					border-1px(rgba(7, 17, 87, .1))
				.icon
					display inline-block
					vertical-align top
					width 14px
					height 14px
					margin-right 2px
					background-size cover
					background-repeat no-repeat
					&.decrease
						bg-img(decrease_3)
					&.discount
						bg-img(discount_3)
					&.invoice
						bg-img(invoice_3)
					&.special
						bg-img(special_3)
					&.guarantee
						bg-img(guarantee_3)
				&.current
					position relative
					z-index 10
					padding-top 1px
					margin-top -1px
					background-color #FFF
					font-weight 700
					.text::after
						border none
		.foods-wrapper
			flex 1
			.title
				padding-left 14px
				height 26px
				line-height 26px
				border-left 2px solid #D9DD1
				font-size 12px
				color rgb(147, 153, 159)
				background-color #F3F5F7
				margin 0
				font-weight 200
			.food-item
				display flex
				margin 18px
				padding-bottom 18px
				border-1px(rgba(7, 17, 27, .1))
				&:last-child
					margin-bottom 0
				&:last-child::after
					content ''
					border none
				.icon
					flex 0 0 57px
					margin-right 10px
					width 57px
					height 57px
					font-size 0
				.content
					flex 1
					.name
						margin 2px 0 8px
						height 14px
						line-height 14px
						font-size 14px
						color rgb(7, 17, 27)
					.desc, .extra
						line-height 10px
						font-size 10px
						color rgb(147, 153, 159)
					.desc
						margin 0 0 8px
						line-height 12px
					.extra
						.count
							margin-right 12px
					.price
						line-height 24px
						font-size 0
						.now
							margin-right 8px
							font-size 10px
							color rgb(240, 20, 20)
							.num
								font-size 14px
								font-weight 700
						.old
							text-decoration line-through
							font-size 10px
							color rgb(147, 153, 159)
					.cartcontrol-wrapper
						position absolute
						right 0px
						bottom 20px
</style>